<template>
  <div class="sidebar">
    <el-menu class="sidebar-el-menu"
     @open="handleOpen"
      :collapse="collapse" background-color="#324157" text-color="#bfcbd9" active-text-color="#20a0ff" unique-opened >
      <!-- 第一层 -->
      <template v-for="(item,i) in items">
        <!-- 如果第一层有子菜单，则继续循环 -->

        <MenuNext :item="item" v-if="item.subs" :key="item.index" />
        <!-- 如果第一层没有子菜单 -->
        <template v-else>
          <el-menu-item :index="item.path" :key="item.index">
            <i :class="item.iconCode"></i>
            <span slot="title">{{ item.title }}</span>
          </el-menu-item>
        </template>
      
      </template>
    </el-menu>
  </div>
</template>
 
<script>
import { cloneDeep } from 'lodash'
import MenuNext from './menu-next.vue'
export default {
  components: { MenuNext },
  props: [`parentNode`, 'childNode'],
  data() {
    return {

      collapse: false,
      keyIndex: 0,
      parentData: [],
      childData: [],
      // items: [{
      //   icon: 'el-icon-lx-home',
      //   index: 'dashboard',
      //   title: '系统首页'
      // },
      // {
      //   icon: 'el-icon-lx-cascades',
      //   index: 'table',
      //   title: '基础表格'
      // },
      // {
      //   icon: 'el-icon-lx-copy',
      //   index: 'tabs',
      //   title: 'tab选项卡'
      // },
      // {
      //   icon: 'el-icon-lx-calendar',
      //   index: '3',
      //   title: '表单相关',
      //   subs: [{
      //     index: 'form',
      //     title: '基本表单'
      //   },
      //   {
      //     index: '3-2',
      //     title: '三级菜单',
      //     subs: [{
      //       index: 'editor',
      //       title: '富文本编辑器'
      //     },
      //     {
      //       index: 'markdown',
      //       title: 'markdown编辑器'
      //     },
      //     {
      //       index: '3-2-1',
      //       title: '四级菜单',
      //       subs: [{
      //         index: 'music',
      //         title: '网易云时间'
      //       },
      //       {
      //         index: 'math',
      //         title: '数学时间'
      //       }, {
      //         index: '3-2-1-1',
      //         title: '五级菜单',
      //         subs: [{
      //           index: 'english',
      //           title: '英语时间'
      //         }, {
      //           index: 'show',
      //           title: '展示时间'
      //         }]
      //       }]
      //     }
      //     ]
      //   },
      //   {
      //     index: 'upload',
      //     title: '文件上传'
      //   }
      //   ]
      // },
      // {
      //   icon: 'el-icon-lx-emoji',
      //   index: 'icon',
      //   title: '自定义图标'
      // },
      // {
      //   icon: 'el-icon-pie-chart',
      //   index: 'charts',
      //   title: 'schart图表'
      // },
      // {
      //   icon: 'el-icon-rank',
      //   index: '6',
      //   title: '拖拽组件',
      //   subs: [{
      //     index: 'drag',
      //     title: '拖拽列表'
      //   },
      //   {
      //     index: 'dialog',
      //     title: '拖拽弹框'
      //   }
      //   ]
      // },
      // {
      //   icon: 'el-icon-lx-global',
      //   index: 'i18n',
      //   title: '国际化功能'
      // },
      // {
      //   icon: 'el-icon-lx-warn',
      //   index: '7',
      //   title: '错误处理',
      //   subs: [{
      //     index: 'permission',
      //     title: '权限测试'
      //   },
      //   {
      //     index: '404',
      //     title: '404页面'
      //   }
      //   ]
      // },
      // {
      //   icon: 'el-icon-lx-redpacket_fill',
      //   index: '/donate',
      //   title: '支持作者'
      // }
      // ],
      items: []
    };
  },
  computed: {

  },
  async created() {
    this.parentData = await this.parentNode()
    this.childData = await this.getChildNode(this.parentData[0].id)
    this.items = this.getItems(this.childData,'')
  },
  methods: {
    getItems(data,index) {
      let item = data.map((item, i) => {
        let datas = { ...item, index: String(i+index) }
        if (item.hasChildren) {
          datas.subs = [{
            title: '',
            path: i + '-' + '0',
            index: i + '-' + '0'+index,
          }]

        }
        return datas
      })
      return item

    },

    async getChildNode(id, params) {
      let data = await this.childNode(id, params)
      return data
    },
    async handleOpen(key, keyPath) {
       console.log(keyPath)
      let item =  this.findNode(key,this.items)
      if(item.subs[0].title!==''){
        return
      }
      let data = await this.getChildNode(this.parentData[0].id, { parentPath: key })
      item.subs = this.getItems(data,key)
  
      this.items = cloneDeep(this.items)
     console.log(this.items)

    },
    findNode(path,items){
      let data =''
      items.some(item => {
        if(item.path === path){
          data = item
        }else{
          if(item.subs){
            data = this.findNode(path,item.subs)
          }
        }
        if(data){
          return true
        }
      })
      return data
    
    }

  }



};
</script>
 
<style scoped>
.sidebar {
  display: block;
  position: absolute;
  left: 0;
  top: 0px;
  bottom: 0;
  overflow-y: scroll;
}

.sidebar::-webkit-scrollbar {
  width: 0;
}

.sidebar-el-menu:not(.el-menu--collapse) {
  width: 250px;
}

.sidebar > ul {
  height: 100%;
}
</style>